/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <!-- <el-select size="small" v-model="formInline.isLock" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="N"></el-option>
          <el-option label="已锁定" value="Y"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userName" placeholder="输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.phone" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="userData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
       <el-table-column align="center" sortable prop="uid" label="编号" width="120">
      </el-table-column>
       <el-table-column align="center" sortable prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="realName" label="姓名" width="120">     
       <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.realname }}</p>
          <p>用户名: {{ scope.row.userName }}</p>          
          <p>性别: {{ scope.row.gender?'男':'女' }}</p>
          <p>手机号: {{ scope.row.phone }}</p>
          <p>邮件: {{ scope.row.email }}</p>
          <p>身份证号: {{ scope.row.id_number }}</p>
          <!-- <p>修改时间: {{ scope.row.editTime}}</p> -->
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.realname }}</el-tag>
          </div>
        </el-popover>
      </template>
      </el-table-column>
        <el-table-column align="center" sortable prop="gender" label="性别" width="120">
           <template slot-scope="scope">
          {{scope.row.gender?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="email" label="邮件" min-width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="id_number" label="身份证号" min-width="120">        
      </el-table-column>     
    <el-table-column align="center" sortable prop="is_vip" label="权限" min-width="120">  
        <template slot-scope="scope">
              {{scope.row.is_vip?'管理员':'普通用户'}}
        </template>      
      </el-table-column> 
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>       
         
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item label="编号" prop="uid">
          <el-input size="small" v-model="editForm.uid" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input size="small" v-model="editForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input size="small" v-model="editForm.realname" auto-complete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
       
        <el-form-item label="手机号" prop="phone">
          <el-input size="small" v-model="editForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input size="small" v-model="editForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_number">
          <el-input size="small" v-model="editForm.id_number" placeholder="请输入身份证"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="is_vip">
          <el-input size="small" v-model="editForm.is_vip" placeholder="请输入权限">
  
          </el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="editForm.gender" label="1" >男</el-radio>
          <el-radio v-model="editForm.gender" label="0" >女</el-radio>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">保存</el-button>
      </div>
    </el-dialog>   

  </div>
</template>

<script>
// 导入请求方法
import {userList,usersPage,searchUser,editUser} from '@/api/users'
import Pagination from '@/components/backstage/Pagination'

export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      // 编辑与添加
      editForm: {
        uid: '',
        userName: '',
        realname: '',
        // roleId: '',
        phone: '',
        email: '',
        gender: '',
        id_number:'',
        is_vip:''      
      },     
      // 选择数据
      selectdata: [],
      // rules表单验证
      rules: {
        // uid:{
        //   required: true, message: '请输入编号', trigger: 'blur' 
        // },
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        // roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
    
      // 请求数据参数
      formInline: {
        // pageNum: 1,
        // pageSize: 10,
        // deptId: '',
        userName: '',
        phone: '',
        // isLock: ''
      },
      //用户数据
      userData: [],
      // 数据权限
      UserDept: [],
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10        
      },
      paging:{
        page_Num:'',
        page_size:'',
        total:''
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  mounted() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
       // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 获取数据方法
    getdata(parameter) {
      this.loading = true      
      // 获取用户列表     
      userList(parameter).then(res => {
        this.loading = false
        if (res.code==0) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.userData = res.data
          // 分页赋值
          this.paging=res.paging;
          this.pageparm.currentPage = this.paging.page_Num
          this.pageparm.pageSize =  this.paging.page_size
          this.pageparm.total = this.paging.total
        }
      })
    },
    // 分页插件事件
    callFather(parm) {
      // this.getdata(this.formInline)
      // this.formInline.pageNum = parm.currentPage
      // this.formInline.pageSize = parm.pageSize
      // console.log(parm);
      usersPage(parm).then(result=>{
        // console.log(result.data);
        this.loading = false
        this.userData = result.data;
        this.pageparm.currentPage = parm.currentPage
        this.pageparm.pageSize = parm.pageSize
        // this.pageparm.total = this.userData.length;
      })
    },
    //搜索事件
    search() {
      // this.getdata(this.formInline)
      let obj=this.qs.stringify(this.formInline)
      searchUser(obj).then(res=>{
        console.log(`search`,res);
        this.userData = res.data;  
        this.pageparm.currentPage = 1
        this.pageparm.pageSize = 10
        this.pageparm.total = 1      
      })
    },     
    
    //显示编辑界面
    handleEdit(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改用户'
        this.editForm.uid = row.uid
        this.editForm.userName = row.userName
        this.editForm.realName = row.realName
        // this.editForm.roleId = row.roleId
        this.editForm.phone = row.phone
        this.editForm.email = row.email
        this.editForm.gender = row.gender
        this.editForm.id_number = row.id_number
        this.editForm.realname= row.realname
        this.editForm.is_vip=row.is_vip
      } 
    },
    // 编辑、添加提交方法
    submitForm(editData) {
      this
      // console.log(editData);
      editData=this.qs.stringify(editData)
      editUser(editData)
      .then(res => {    
        console.log(res.msg);      
        this.editFormVisible = false
        this.loading = false
          if (res.code) {
            // console.log(res.data.msg);
            // alert('数据保存成功！')
            this.$message({
            type: 'success',
            message: '数据保存成功！'
            })
            this.getdata(this.formInline)            
           
          } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('保存失败，请稍后再试！')
            })
    }
    }
  }

</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 